<script setup lang="ts">
import { ref } from 'vue'

const messages = ref([
    {
        id: 1,
        title: '预约成功通知',
        content: '您已成功预约3月20日上午张医生的门诊',
        time: '2024-03-18 10:30',
        isRead: false
    },
    {
        id: 2,
        title: '取药提醒',
        content: '您的药品已准备好，请到3号窗口取药',
        time: '2024-03-17 15:20',
        isRead: true
    },
    {
        id: 3,
        title: '复诊提醒',
        content: '别忘了明天下午2点的复诊预约',
        time: '2024-03-16 09:00',
        isRead: true
    }
])
</script>

<template>
    <div class="message-page">
        <h2 class="page-title">消息中心</h2>

        <div class="message-list">
            <div v-for="message in messages" :key="message.id" class="message-item"
                :class="{ 'unread': !message.isRead }">
                <div class="message-header">
                    <span class="message-title">{{ message.title }}</span>
                    <span class="message-time">{{ message.time }}</span>
                </div>
                <div class="message-content">
                    {{ message.content }}
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.message-page {
    padding: 20px;
}

.page-title {
    font-size: 24px;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 20px;
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-item {
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.message-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.message-time {
    font-size: 14px;
    color: #666;
}

.message-content {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

.unread {
    border-left: 4px solid var(--primary-color);
}

.unread .message-title {
    color: var(--primary-color);
}
</style>